<template>
  <div class="outmain ba_f">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom: 20px;">
      <el-tab-pane label="分销商" name="2"></el-tab-pane>
      <el-tab-pane label="待审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
    </el-tabs>
    <template>
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>分销商列表</span>
        </div>
      </div>
      <div class="pad_20 flex-bet flex-y-top">
        <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
          <el-form-item label="用户昵称/分销商姓名">
            <el-input v-model="formInline.keyword" size="medium" placeholder="用户昵称/分销商姓名" @input="onSearch"></el-input>
          </el-form-item>
          <!--          <el-form-item label="分销等级">-->
          <!--            <el-select v-model="formInline.vipLabel" placeholder="请选择" @change="onSearch">-->
          <!--              <el-option v-for="item in labelOptions" :key="item.id" :label="item.labelName" :value="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="分销商注册时间">
            <el-date-picker v-model="formInline.timeData" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabledata">
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe
                  style="width: 100%" @selection-change="setSelectRows">
          <el-table-column type="selection" width="55"  key="1"></el-table-column>
          <el-table-column prop="portrait" label="昵称/图像" width="300"  key="2">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <div class>
                  <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                </div>
                <div class="mar_l10">
                  <div class="">
                    <div class>{{ scope.row.userName }}</div>
                    <div>
                      <el-tag size="mini" type="info" class="mar_l5">（ID:{{ scope.row.userId }}）</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userTel" label="姓名/手机号"  key="3">
            <template slot-scope="scope">
              <div>姓名：{{ scope.row.name }}</div>
              <div>手机号：{{ scope.row.tel }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="allMoney" label="累计佣金/提现佣金"  key="4" v-if="activeName=='2'">
            <template slot-scope="scope">
              <div>
                累计：{{ scope.row.allMoney }}
              </div>
              <div>
                已提现：{{ scope.row.alreadyMoney }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="onePeople" label="下级用户" key="5" v-if="activeName=='2'">
            <template slot-scope="scope">
              <div class="subjectcolor2 curs" @click="handleEdit(scope.row,1)">
                一级：{{ scope.row.onePeople }}
              </div>
              <div class="subjectcolor2 curs" @click="handleEdit(scope.row,2)">
                二级：{{ scope.row.twoPeople }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="状态"  key="6">
            <template slot-scope="scope">
              <div style="color:#155BD4" v-if="scope.row.state=='1'">待审核</div>
              <div style="color: #489620" v-if="scope.row.state=='2'">已通过</div>
              <div style="color: #df0029" v-if="scope.row.state=='3'">已拒绝</div>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="提交时间" key="7"></el-table-column>
          <el-table-column label="操作" key="8">
            <template slot-scope="scope">
              <el-dropdown class="more">
                <el-button type="text" size="mini" class="mar_l10">
                  操作
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="activeName=='2'">
                    <span @click="handClick1(scope.row)">提现订单</span>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="activeName=='2'">
                    <span @click="handClick(scope.row)">分销订单</span>
                  </el-dropdown-item>
                  <template v-if="activeName!='2'">
                    <el-dropdown-item>
                      <span @click="handShenhe(scope.row.id,'1')">通过</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="handShenhe(scope.row.id,'2')">拒绝</span>
                    </el-dropdown-item>
                  </template>
                  <el-dropdown-item>
                    <span @click="handleDelete(scope.row,3)">删除</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
        </el-pagination>
        <edit ref="edit" @fetchData="fetchData"></edit>
      </div>
    </template>
  </div>
</template>
<script>

import {distributionList, modifyDistribution} from "@/api/plug";
import {changeDate} from "@/utils";
import Edit from "./components/glabeledit";

export default {
  components: {Edit},
  name: 'distributionAdmin',
  created() {
    this.fetchData();
  },
  data() {
    return {
      activeName: '2',
      formInline: {
        keyword: '',
        vipLabel: '',
        timeData: [],
      },
      list: [],
      listLoading: true,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      let startTime = '';
      let endTime = '';
      if (this.formInline.timeData.length) {
        startTime = changeDate(this.formInline.timeData[0]);
        endTime = changeDate(this.formInline.timeData[1]);
      }
      var params = {
        keyword: this.formInline.keyword,
        page: this.page.currentPage,
        state: this.activeName,
        startTime,
        endTime,
      };
      const {data, count} = await distributionList(params);
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    handleEdit(row, type) {
      if (row.id) {
        this.$refs["edit"].showEdit(row, type);
      }
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    handleClick() {
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    handClick1(row){
      this.$router.push(`/WithdrawalSet?userId=${row.userId}`);
    },
    handClick(row){
      this.$router.push(`/distributionOrder?userId=${row.userId}`);
    },
    async handShenhe(id, type) {
      const {msg} = await modifyDistribution({id, type,});
      this.$baseMessage(msg, "success");
      this.fetchData();
    },
    handleDelete(row, type) {
      if (row.id) {
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const {msg} = await modifyDistribution({id: row.id, type,});
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      }
    },
  }
};
</script>
